<template>
      <div class="outBox">
       <div class="topBox">
         <input type="text" placeholder="会员手机/姓名" v-model="value2">
         <el-select v-model="value" class="m-2" placeholder="请选择课程分类" size="large">
           <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
           />
         </el-select>

         <el-button type="primary" @click="lookValue">查询</el-button>
       </div>
        <div class="bottomBox">
          <el-table

              ref="multipleTableRef"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              border="border"


          >
            <el-table-column type="selection" width="55px" />
            <el-table-column property="date" label="评价时间" />
            <el-table-column property="class" label="课时"  />
            <el-table-column property="teacher" label="教练"  />
            <el-table-column property="avluation" label="训练感受"  />
            <el-table-column property="start" label="教练服务"  />
            <el-table-column property="Vip" label="会员"  />
            <el-table-column property="pic" label="照片"  />
            <el-table-column property="isShow" label="是否显示"  />

          </el-table>
          <div class="example-pagination-block">
           <el-pagination layout="prev, pager, next" :total="5" />
          </div>

        </div>


<!--        评价:{{cunt}}-->

      </div>
</template>

<script lang="ts" >
import { defineComponent , ref } from "vue";
export default defineComponent({
  name: "avluation",
  setup(){

    interface User {
      date: string
      avluation: string
      start:string
      pic:string
      isShow:string
      teacher: string
      class:string
      Vip:number
    }


    const multipleSelection = ref<User[]>([])

    const handleSelectionChange = (val: User[]) => {
      multipleSelection.value = val
    }

    const tableData: User[] = [
      {
        date: '2016-05-03',
        avluation: '累',
        start:'好极了',
        pic:'5星',
        isShow:'是',
        teacher: '刘强',
        class:'瑜伽',
        Vip:1233,

      },
      {
        date: '2016-05-03',
        avluation: '累',
        start:'5星',
        pic:'5星',
        isShow:'是',
        teacher: '强',
        class:'游泳',
        Vip:1235,

      },
      {
        date: '2016-05-03',
        avluation: '累',
        start:'5星',
        pic:'5星',
        isShow:'是',
        teacher: '小红',
        class:'跆拳',
        Vip:1232,

      },
      {
        date: '2016-05-03',
        avluation: '累',
        start:'5星',
        pic:'5星',
        isShow:'是',
        teacher: '张',
        class:'普拉提',
        Vip:1234,

      },
      {
        date: '2016-05-03',
        avluation: '累',
        start:'5星',
        pic:'5星',
        isShow:'是',
        teacher: '刘强',
        class:'瑜伽',
        Vip:12322,

      },
      {
        date: '2016-05-03',
        avluation: '累',
        start:'5星',
        pic:'5星',
        isShow:'是',
        teacher: '刘强',
        class:'增肌训练',
        Vip:1283,

      },

    ]




    const cunt=2;
    const value = ref('')
    const value2 = ref('')
    const options = [
      {
        value: '瑜伽',
        label: '瑜伽',
      },
      {
        value: '跆拳',
        label: '跆拳',
      },
      {
        value: '普拉提',
        label: '普拉提',
      },
      {
        value: '游泳',
        label: '游泳',
      },
      {
        value: '增肌训练',
        label: '增肌训练',
      },
    ]
    //点击确认按钮获取的数据
   let  lookValue = ()=>{
     console.log(value.value,value2.value)
   }

    return{
      cunt,
      value,
      options,
      handleSelectionChange,
      tableData,
      lookValue,
      value2
    }
  },
})
</script>

<style scoped lang="less" >
.outBox{
  padding: 24px ;
  //上面的搜索盒子
  .topBox{
    height: 30%;
    width: 100%;

    input{
      width: 180px;
      height: 36px;
      text-indent:1em;
      outline: 1px solid #e3e5eb;
      border: none;
    }
    .m-2{
      margin-left:20px ;
    }
    .el-button{
      margin-left:20px ;
      width: 80px;
      height: 36px;
    }
  }
  //列表盒子
  .bottomBox{

    width: 100%;
    height: 100%;
    margin-top: 20px;
  }


}
.example-pagination-block {
  margin-top: 10px;
  margin-left: 90%;
}
</style>